<template>
    <div class="categories">
        <el-button type="primary" @click="openAdd">添加分类</el-button>
        <Dialog :dialog="addForm"> 
            <template #selected>
                {{value}}
                <el-form-item label="父级分类：">
                    <el-cascader v-model="value" :props="prop" :options="options" @change="handleChange"/>
                </el-form-item>
            </template>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addForm[0].show = false">取消</el-button>
                    <el-button type="primary" @click="add()">确定</el-button>
                </span>
            </template>
        </Dialog>
        <Table row-key="cat_id" border :cols="cols" :data="cateData" :tree-props="{ children: 'children'}">
            <template #effective="scope">
                <el-button v-if="!scope.row.cat_deleted" type="success" size="small" :icon="Check" circle />
                <el-button v-if="scope.row.cat_deleted" type="danger" size="small" :icon="CloseBold" circle />
            </template>
            <template #level="{row}">
                <el-tag v-if="row.cat_level == 0" size="large">一级</el-tag>
                <el-tag v-if="row.cat_level == 1" size="large" type="success">二级</el-tag>
                <el-tag v-if="row.cat_level == 2" size="large" type="warning">三级</el-tag> 
            </template>
            <template #action="{row}">
                <span class="dialog-footer">
                    <el-button  :icon="Edit" @click="open(row)">编辑</el-button> 
                    <el-button :icon="Delete" type="danger" @click="del(row)">删除</el-button>
                </span>
            </template>
        </Table>
        <!-- 修改 -->
        <Dialog :dialog="changeForm">
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="changeForm[0].show = false">取消</el-button> 
                    <el-button type="primary" @click="changed()">确定</el-button>
                </span>
            </template>
        </Dialog>
        <!-- 分页 -->
        <el-pagination
            v-model:currentPage="params.pagenum"
            v-model:page-size="params.pagesize"
            :page-sizes="[5, 10, 20, 30]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<script setup>
import Dialog from '@/components/Dialog'
import Table from '@/components/Table'
import { ref,reactive,onMounted } from 'vue'
import { getcateList,getCate ,addCate,changeCate,delCate } from '@/utils/categories.js'
import {Check,CloseBold,Edit,Delete,} from '@element-plus/icons-vue'
import { ElMessage,ElMessageBox } from 'element-plus'
// 值
const value = ref([]);
// 列(表格)
const cols = [
    {
        title:'排序',
        type:'index',
        align:'center',
        width:60
    },
    {
        title:'分类名称',
        name:'cat_name',
        align:'center'
    },
    {
        title:'是否有效',
        slot:'effective',
        align:'center'
    },
    {
        title:'分类排序',
        slot:'level',
        align:'center'
    },
    {
        title:'操作',
        slot:'action',
        align:'center',
        width:200
    }
]
// prop
const prop = {label:'cat_name',value:'cat_id'}
// 添加弹框
const addForm = ref([
    {
        show:ref(false),
        title:'添加分类',
        data:ref([
            {
                name:'分类名称:',
                prop:'cat_name',
                value:''
            },
            {
                prop:'pid',
                value:[],
                hide:true
            }
        ])
    },
    {   
        name:'父级分类：',
        slot:'selected',
        value:''
    },
    {   
        slot:'footer',
    }
])
// 修改弹框
const changeForm = ref([
    {
        show:ref(false),
        title:'修改分类',
        data:ref([
            {
                name:'分类名称:',
                prop:'cat_name',
                value:''
            },
            {
                prop:'id',
                value:'',
                hide:true
            }
        ])
    },
    {   
        slot:'footer',
    }
])
// 总条数
const total = ref(0);
// 分页
const params = reactive( {
    type:'3',
    pagesize:5,
    pagenum:1
});
// 表格
const cateData = ref([])
// 添加
const add = async ()=>{
    var form = {};
    addForm.value[0].data.map(item=>{
        // return `${item.prop}:${item.value}`
        return form[item.prop] = item.value
    })
    form.cat_level = Object.keys(value.value).length;
    form.cat_pid = value.value[Object.keys(value.value).length-1] || 0;
    // console.log(form,885)
    var data = await addCate(form);
    if(data.meta.status == 201){
        ElMessage.success(data.meta.msg);
        addForm.value[0].show = false;
        addForm.value[0].data[0].value = ''
    }
    getCateList();
}
// 删除

const del = async (row)=>{
    ElMessageBox.confirm(
    `您确认删除【${row.cat_name}】吗？删除后无法恢复`,
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
        var data = await delCate(row.cat_id)
      ElMessage({
        type: 'success',
        message: data.meta.msg,
      })
      getCateList();
    }).catch(() => {})
}
// 打开修改弹框
const open = (row)=>{
    changeForm.value[0].show = true;
    changeForm.value[0].data[0].value = row.cat_name;
    changeForm.value[0].data[1].value = row.cat_id;
    console.log(row);
}
// 修改
const changed = async()=>{
    var form = {}; 
    changeForm.value[0].data.map(item=>{
        return form[item.prop] = item.value
    })
    console.log(form,885)
    let data = await changeCate(form.id,form);
    // console.log(data,'修改')
    if(data.meta.status == 200){
        ElMessage.success(data.meta.msg);
        changeForm.value[0].show = false;
        getCateList();
    }
}
// 分页
const handleSizeChange = (val) => {
    params.pagesize = val;
    getCateList();
//   console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    params.pagenum = val;
    getCateList();
//   console.log(`current page: ${val}`)
}
// 路由
const options = ref([]);
// 添加弹框
const openAdd = async ()=>{
    addForm.value[0].show = true;
    var type = 2;
    let data = await getCate(type);
    options.value = data.data
}
// 渲染
const getCateList = async ()=>{
    let data = await getcateList(params);
    if(data.meta.status == 200){
        cateData.value = data.data.result;
        total.value = data.data.total;
    }
}

onMounted(() => {
    getCateList();
})
</script>
<style lang="scss" scoped>
    
</style>